<template>
  <div>
    <Meta v-if="DetailInfo.title!==undefined" pagealias="cityinfoshow" :custom_data="{title:DetailInfo.title}" />
    <Head>详情介绍</Head>
    <div class="tab_con_wraper" >
      <div class="tab_active_text substring">
        {{currentText}}
      </div>
      <div class="tab_wrapper ">
        <div class="tab_content">
          <router-link class="tab_item" :to="`/cityinfo/infolist/${item.id}/0`" v-for="(item, index) in sortList" :key="index">{{item.title}}</router-link>
        </div>
      </div>
    </div>
    <div>
      <van-notice-bar color="#fc6401" background="#fefbea"  left-icon="warn-o" text="本平台仅供信息发布，任何刷信誉、刷单、网络兼职、只要求加V信联系的职位都是骗子！收取费用或押金都有欺诈嫌疑，请警惕！"/>
    </div>
    <div class="details_box" ref="details">
      <div class="title_wrapper">
        <p class="title">{{DetailInfo.title}}</p>
        <div class="info">
          <span class="left l_text">
            <span class="tag">{{DetailInfo.type_name}}</span>
            <span>{{DetailInfo.refreshtime}}</span>
          </span>
          <span class="right r_text">
            <span class="text">
              <span class="color">{{DetailInfo.view_times}}</span>   浏览
            </span>
            <span class="text">
              <span class="color">{{DetailInfo.share_times}}</span>  分享
            </span>
          </span>
          <div class="clear"></div>
        </div>
      </div>
      <div class="details_content">
        <div>
          <div class="content_title">信息内容</div>
          <div class="content_text">
            <p class="text">{{DetailInfo.desc}}</p>
            <img v-for="(item, index) in DetailInfo.img_arr" :key="index" :src="item.img" alt="">
          </div>
        </div>
        <div>
          <div class="content_title">联系方式</div>
          <div class="base_info">
            <div class="base_item">
              <span class="lable">联系人：</span> {{DetailInfo.linkman}}
            </div>
            <div class="base_item">
              <span class="lable">电话：</span>{{DetailInfo.mobile}}<span class="phone" @click="checkTel" v-if="DetailInfo.is_hide">[查看电话]</span>
            </div>
            <div class="base_item" v-if="DetailInfo.address_detail">
              <span class="lable">地址：</span>{{DetailInfo.address_detail}}<img class="address" @click="setMapAddress" src="../../assets/images/cityinfo/info-address-icon.png" alt="">
            </div>
            <div class="tip">
              联系我时请说明在{{title}}看到的！
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line" v-if="DetailInfo.ad_list.length != 0"></div>
    <div class="link" v-if="DetailInfo.ad_list.length != 0">
      <img :src="DetailInfo.ad_list[0].imgurl" alt="" @click="handlerClick(DetailInfo.ad_list[0])">
    </div>
    <div class="line"></div>
    <div class="report">
      <div class="text">
        <p class="text_1 substring">如遇无效、虚假、诈骗信息，请立即举报！</p>
        <p class="text_2 substring">谨防诈骗！若信息不实请举报。</p>
      </div>
      <div class="icon" @click="handleReport">
        举报
      </div>
    </div>
    <div class="line"></div>
    <ListItem ref="infoListItem" :listData="infoList"></ListItem>
    <div class="height"></div>
    <div :class="btnShow ? 'side_nav_1':'side_nav_2'">
      <router-link class="side_nav_item side_nav_item_1" :to="'/cityinfo/selclass'">发布</router-link>
      <a class="side_nav_item side_nav_item_2" @click="createposter">海报</a>
      <a class="side_nav_item side_nav_item_3" v-if="btnShow" @click="backTop"></a>
    </div>
    <div class="bottom_bar">
      <router-link class="item item_1" :to="'/cityinfo'">首页</router-link>
      <router-link class="item item_2" :to="'/cityinfo/selclass'">发布</router-link>
      <a class="item item_3" @click="createposter">分享</a>
      <a class="tel" @click="dialling" >拨打电话</a>
    </div>
    <!-- 支付提示弹框 -->
    <van-dialog v-model="payTip" title="系统提示" show-cancel-button @confirm="payPopup">
      <p class="dialog_text">查看该信息联系方式，需要支付 <span>{{DetailInfo.pay_for_mobile}}</span> 元</p>
    </van-dialog>
    <!-- 支付弹框 -->
    <van-popup v-model="showPayment" closeable position="bottom">
      <PopupPayment :amount="DetailInfo.pay_for_mobile" @handlerSubmit="choicePayMode" ></PopupPayment>
    </van-popup>
    <PaySubmit ref="paySubmit" :payment='paymoth' :success-url="'/cityinfo/info/' + listShowId"></PaySubmit>
    <!-- 海报 -->
    <van-overlay :show="sharShow" @click="sharShow = false" z-index="999" >
      <!-- 海报加载中 -->
      <van-overlay z-index="10" :show="makePicDone===false">
        <van-loading color="#1989fa" class="loading" >加载中...</van-loading>
      </van-overlay>
      <div ref="poster" class="poster_box" @click.stop v-if="makePicDone === false">
        <div class="describe">
          <div class="describe_text">
            {{poster_text}}
          </div>
          <div class="describe_img_list clearfix" v-if="DetailInfo.img_arr">
            <img v-for="(item, index) in DetailInfo.img_arr" :key="index" :src="item.img" alt="">
          </div>
        </div>
        <div class="tip_box clearfix">
          <div class="tip_text">
            <span class="text_1">{{DetailInfo.type_name}}</span>
            <p class="text_2">长按识别二维码查看该信息详细内容</p>
            <p class="text_3">{{DetailInfo.cityinfo_title}}</p>
          </div>
          <div class="code">
            <img :src="qrcode" alt="">
          </div>
        </div>
      </div>
      <div class="makePicDone" v-else>
        <img :src="imgUrl" alt="">
      </div>
    </van-overlay>
    <!-- 举报弹出窗 -->
    <van-popup v-model="isReport"  position="right" :overlay="false" style="width:100%;height:100%" >
      <Head :goback_custom="true" @gobackCustomMethod="isReport = false">举报信息</Head>
      <van-notice-bar color="#fc6401" background="#fefbea" left-icon="info-o" :scrollable="false">
        <div class="notice_wrapper">
          <span>举报信息：</span>
          <span class="notice_text">{{DetailInfo.desc}}</span>
          <span class="details" @click="isReport = false">查看详情</span>
        </div>
      </van-notice-bar>
      <div class="report_content">
        <div class="title">举报原因</div>
        <textarea v-model="feedbackText" class="feed_area"  rows="8"  placeholder="请简要描述您的问题，以便我们尽快核实解决"></textarea>
        <van-button @click="sendFeedback" type="info" round  size="large">提交</van-button>
      </div>
    </van-popup>
    <!-- 登录 -->
    <van-popup
      v-model="showLogin"
      position="right"
      :overlay="false"
      style="width:100%;height:100%"
    >
      <Login
        :utype="2"
        :single_login="true"
        @afterLogin="afterLogin"
        :after_login_data="after_login_data"
        :goback_custom="true"
        @gobackCustomMethod="closeLogin"
      ></Login>
    </van-popup>
  </div>
</template>

<script>

import PopupPayment from '@/components/service/PopupPayment'
import PaySubmit from '@/components/service/PaySubmit'
import Fulltext from './components/fulltext.vue'
import {generatePicture} from '@/utils/index'
import ListItem from './components/ListItem'
import Login from '@/components/Login'
import http from '@/utils/http'
import api from '@/api'
export default{
  components: {
    PaySubmit,
    PopupPayment,
    Fulltext,
    Login,
    ListItem
  },
  data () {
    return {
      payTip: false, // 查看联系方式提示弹窗
      showPayment: false, // 支付弹窗
      isWhole: false, // 全文展示状态
      scrollTop: 0, // 返回顶部距离
      btnShow: false, // 返回顶部按钮状态
      sharShow: false, // 海报弹窗状态
      isReport: false, // 举报弹窗状态
      listShowId: null, // 详情页id
      feedbackText: '', // 举报内容
      sortList: [], // 分类信息
      currentClassify: '',
      currentText: '求职招聘', // 分类当前选中项
      imgUrl: '', // 生成海报图片路径
      makePicDone: false, // 海报展示状态
      DetailInfo: {
        ad_list: [{}]
      }, // 详情信息
      infoList: [], // 详情列表
      qrcode: '', // 海报二维码
      poster_text: '', // 海报文字
      pid: null, // 一级分类id
      paymoth: '', // 支付方式
      telState: '', // 是否支付查看电话
      showLogin: false, // 登录
      after_login_data: {}, // 登录
      is_personal_login: false, // 登录
      title: '',
      JumpItem: null
    }
  },
  created () {
    this.title = this.$store.state.config.cityinfo_title
    this.is_personal_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2
    this.listShowId = this.$route.params.id
    this.pid = this.$route.query.pid
    this.telState = this.$route.query.telState
    this.getData()
    this.getListData()
  },
  mounted () {
    this.qrcode = window.global.RequestBaseUrl + api.get_qrcode + '?type=normal&url=' + location.href
    window.scrollTo(0, 0)
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  watch: {
    '$route.params.id' () {
      this.listShowId = this.$route.params.id
      this.telState = this.$route.query.telState
      this.getData()
      window.scrollTo(0, 0)
    }
  },
  methods: {
    checkTel () {
      if (this.is_personal_login === false) {
        this.$dialog
          .confirm({
            title: '提示',
            message: '当前操作需要登录求职者账号',
            confirmButtonText: '去登录'
          })
          .then(() => {
            this.showLogin = true
            this.after_login_data = {
              method: 'contactHim'
            }
          })
          .catch(() => {})
      } else {
        this.payTip = true
      }
    },
    // 支付提示弹窗
    payPopup () {
      this.showPayment = true
    },
    // 举报弹窗
    handleReport () {
      this.isReport = true
    },
    // 返回顶部
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 10)
    },
    scrollToTop () {
      const that = this
      that.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.btnShow = that.scrollTop > 150
    },
    // 获取详情信息
    getData () {
      http.get(api.article_info, {id: this.listShowId}).then(res => {
        if (res.code == 200) {
          this.$nextTick(() => {
            this.DetailInfo = res.data
            if (this.DetailInfo.desc) {
              this.poster_text = (this.DetailInfo.desc).substr(0, 80)
            }
            if (this.DetailInfo.need_pay_for_mobile && this.DetailInfo.pay_for_mobile > 0 && this.DetailInfo.paid == 0 && this.telState == 'tel') {
              this.payTip = true
            }
            this.getSortList()
          })
        }
      })
    },
    // 举报
    sendFeedback () {
      http.post(api.cityFeedback, {id: this.DetailInfo.id, content: this.feedbackText, article_id: this.DetailInfo.id}).then(res => {
        if (res.code == 200) {
          this.isReport = false
          this.$notify({ type: 'success', message: res.message })
        }
      })
    },
    // 分类列表数据获取
    getSortList () {
      http.get(api.type_tree).then(res => {
        if (res.code == 200) {
          this.sortList = res.data
          var current = this.sortList.filter(res => {
            return parseInt(res.id) === parseInt(this.DetailInfo.pid)
          })[0]
          this.currentText = current == undefined ? '求职招聘' : current.title
        }
      })
    },
    // 生成海报
    createposter () {
      this.sharShow = true
      this.makePicDone = false
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      http.get(api.article_share, {id: this.DetailInfo.id}).then(res => {})
      setTimeout(() => {
        generatePicture(this.$refs.poster).then(url => {
          this.imgUrl = url
          this.makePicDone = true
        })
      }, 500)
    },
    // 详情列表分类获取
    getListData () {
      http.post(api.info_article_list, {type_id: this.DetailInfo.type_id}).then(res => {
        if (res.code == 200) {
          res.data.list.map(res => {
            if (res.id != this.listShowId) {
              this.infoList.push(res)
            }
          })
        }
      })
    },
    // 支付
    choicePayMode (val) {
      this.paymoth = val
      this.$refs.paySubmit.handlerSubmit(api.city_order_pay, {
        id: this.DetailInfo.id,
        pay_type: this.paymoth,
        order_type: 2,
        redirect_url: this.$store.state.config.mobile_domain + 'cityinfo/info/' + this.listShowId
      })
    },
    // 拨打电话
    dialling () {
      if (this.is_personal_login === false) {
        this.$dialog
          .confirm({
            title: '提示',
            message: '当前操作需要登录求职者账号',
            confirmButtonText: '去登录'
          })
          .then(() => {
            this.showLogin = true
            this.after_login_data = {
              method: 'contactHim'
            }
          })
          .catch(() => {})
      } else {
        if ((this.DetailInfo.need_pay_for_mobile && this.DetailInfo.pay_for_mobile <= 0) || (this.DetailInfo.need_pay_for_mobile && this.DetailInfo.paid)) {
          window.location.href = 'tel:' + this.DetailInfo.mobile
        } else {
          this.payTip = true
        }
      }
    },
    // 查看全文
    lookall (index) {
      this.infoList[index].is_all = 1
      this.infoList = this.infoList.map(function (item) {
        return item
      })
    },
    // 广告位跳转
    handlerClick (item) {
      if (item.link_url) {
        window.location.href = item.link_url
      } else if (item.company_id > 0) {
        this.$router.push('/company/' + item.company_id)
      } else if (item.inner_link) {
        let path = ''
        let params_type = 'query'
        switch (item.inner_link) {
          case 'index':
            path = '/cityinfo'
            break
          case 'infoshow':
            path = '/cityinfo/info'
            params_type = 'params'
            break
          default:
            path = ''
            break
        }
        if (path != '') {
          if (item.inner_link_params > 0) {
            if (params_type == 'query') {
              path = path + '?id=' + item.inner_link_params
            } else {
              path = path + '/' + item.inner_link_params
            }
          }
          this.$router.push(path)
        }
      }
    },
    // 地图
    setMapAddress () {
      if (!this.DetailInfo.lat || !this.DetailInfo.lon) {
        return false
      }
      let url =
        'http://api.map.baidu.com/marker?location=' +
        this.DetailInfo.lat +
        ',' +
        this.DetailInfo.lon +
        '&title=' +
        this.DetailInfo.title +
        '&content=' +
        this.DetailInfo.address_detail +
        '&output=html'
      window.location.href = url
    },
    afterLogin () {
      this.showLogin = false
      this.getData()
      this.payTip = true
      this.$refs.infoListItem.is_personal_login = true
    },
    closeLogin () {
      this.showLogin = false
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed_nav{
  position: fixed;
  left: 0;
  right: 0;
  top: 53px;
}
.tab_con_wraper{
  display: flex;
  box-shadow: 0 2px 5px rgba(0,0,0,10%);
  background: #fff;
  .tab_active_text{
    padding: 0 10px;
    color:#1787fb;
    font-size: 14px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    width: 80px;
  }
  .tab_wrapper{
    overflow: hidden;
    flex: 8;
    .tab_content{
      white-space:nowrap;
      overflow-x: auto;
      font-size: 0;
      &::-webkit-scrollbar {
        display: none;
      }
      .tab_item{
        color:#666666;
        font-size: 14px;
        padding: 0 15px;
        height: 47px;
        line-height: 47px;
        display: inline-block;
      }
      .active_item{
        font-weight: bold;
        background: url(../../assets/images/cityinfo/show-tab-icon.png) no-repeat center 27px /40px 5px;
      }
    }
  }
}
.details_box{
  .title_wrapper{
    border-bottom: 1px solid #ececec;
    padding: 30px 13px 18px 16px;
    .title{
      color:#1d1d1d;
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 15px;
    }
    .info{
      color:#999999;
      font-size: 13px;
      .l_text{
        .tag{
          color:#1787fb ;
          font-size: 12px;
          border: 1px solid #1787fb;
          padding: 2px;
          margin-right: 14px;
          display: inline-block;
          border-radius: 3px;
        }
      }
      .r_text{
        padding: 3px 0;
        font-size: 0;
        .text{
          font-size: 13px;
          margin-right: 11px;
          &:last-child{
            margin-right: 0;
          }
        }
        .color{
          color:#2992ff;
        }
      }
    }
  }
  .details_content{
    width: 346px;
    margin: 0 auto;
    .content_title{
      color: #181818;
      font-size: 18px;
      font-weight: bold;
      padding: 22px 0 10px;
    }
    .content_text{
      color: #555555;
      font-size: 15px;
      line-height: 2;
      word-wrap:break-word;
      .text{
        margin-bottom: 10px;
      }
      img{
        width: 346px;
        display: block;
        margin: 0 auto;
      }
    }
    .base_info{
      padding-bottom: 22px;
      .base_item{
        color: #454545;
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 8px;
        .address{
          width:15px;
          height: 19px;
          vertical-align: middle;
          margin-left: 10px;
        }
        .phone{
          color:#f44f06;
          margin-left: 10px;
        }
      }
      .tip{
        color: #b5b5b5;
        font-size: 14px;
      }
    }
  }
}

.link{
  height: 150px;
  background: #fff;
  img{
    width: 100%;
    height: 100%;
  }
}

.report{
  height: 74px;
  font-size: 14px;
  padding: 13px 8px 16px 16px;
  display: flex;
  .text{
    width: 310px;
    .text_1{
      color:#ff5d24;
      line-height: 26px;
    }
    .text_2{
      line-height: 26px;
      color:#666666;
    }
  }
  .icon{
    width: 38px;
    border-left: 1px solid #f3f3f3;
    text-align: right;
    padding-top: 28px;
    color:#ff5d24;
    font-size: 13px;
    background: url(../../assets/images/cityinfo/report-icon.png) no-repeat 13px 0px / 20px 24px;
  }
}

.notice_wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  .notice_text{
    width: 180px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    margin-right: 10px;
  }
  .details{
    color:#1989f9;
    font-size: 14px;
  }
}
.report_content{
  margin: 0 15px;
  .feed_area {
    width: 100%;
    border: 1px solid #e2e2e2;
    resize: none;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 40px;
    &::placeholder {
      color: #c9c9c9;
    }
  }
  .title{
    color: #08050a;
    font-size: 18px;
    padding: 24px 0 20px;
  }
}

.bottom_bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  box-shadow: 0 -1px 2px rgba(0,0,0,10%);
  text-align: center;
  color: #555555;
  font-size: 14px;
  z-index: 999;
  .item{
    flex: 1;
    padding-top: 34px;
    color: #555;
  }
  .item_1{
    background: url(../../assets/images/cityinfo/show-index-icon.png) no-repeat center 10px /17px 16px;
  }
  .item_2{
    background: url(../../assets/images/cityinfo/show-release.png) no-repeat center 10px /15px 16px;
  }
  .item_3{
    background: url(../../assets/images/cityinfo/show-shar.png) no-repeat center 10px /15px 16px;
  }
  .tel{
    flex: 3;
    line-height: 53px;
    background: #1787fb;
    font-size: 18px;
    color: #fff;
  }
}

.list{
  .item{
      padding: 16px 19px 16px 17px;
      border-bottom: 5px solid #f8f8f8;
      .name{
          position: relative;
          color: #333333;
          font-size: 0;
          .top{
            position: absolute;
            left: 0;
            top: 0;
            background-color: #ff4949;
            color: #FFFFFF;
            font-size: 10px;
            padding: 2px 5px;
            margin-right: 5px;
            display: inline-block;
            border-radius: 3px;
          }
          .all{
            position: absolute;
            bottom: 0;
            right: 80px;
            z-index: 1;
            cursor: pointer;
            color: #ff4949;
            display: inline-block;
            font-size: 14px;
          }
          .text{
            display: inline-block;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            word-wrap:break-word;
          }
          .text_indent{
            text-indent: 2.5em;
          }
      }
      .more::after{
          content: "....";
          font-size: 14px;
          position: absolute;
          bottom: 0;
          right: 0;
          padding-right: 120px;
          padding-left: 4px;
          background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 0%);
      }
      .imgs{
        margin-top: 12px;
        position: relative;
        display: flex;
        .img,img{
          width: 77px;
          height: 55px;
          margin-right: 11px;
        }
        .imgnum{
          width: 77px;
          height: 55px;
          position: absolute;
          font-size: 11px;
          color: #ffffff;
          right: -2px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0,0,0,0.6);
        }
      }
      .bottom{
        margin-top: 17px;
        position: relative;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999999;
        .info{
          display: flex;
          align-items: center;
          .label{
            border: 1px solid #1787fb;
            color: #1787fb;
            padding:2px;
            border-radius: 3px;
          }
          span{
            margin-left: 12px;
          }
        }
        .call{
          width: 81px;
          height: 34px;
          position: absolute;
          right: 0;
          background: url("../../assets/images/cityinfo/index/index_58.png") 0 center no-repeat;
          background-size: 81px 34px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 3px;
          .img{
            height: 15px;
            background: url("../../assets/images/cityinfo/index/index_57.png") 0px center no-repeat;
            background-size: 12px 15px;
            color: #ffffff;
            padding-left: 18px;
            font-size: 13px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
  }
}
.loading{
  text-align: center;
  top: 50%;
}
.makePicDone{
  width: 350px;
  height: 310px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  img{
    width: 100%;
    height: 100%;
  }
}

.poster_box{
  width: 350px;
  height: 310px;
  background: url(../../assets/images/cityinfo/poster.png) no-repeat top center /350px 310px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 18px 15px;
  .describe{
    min-height: 180px;
    padding: 18px 15px 17px 12px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 17px;
    .describe_text{
      color: #333333;
      font-size: 14px;
      margin-bottom: 18px;
    }
    .describe_img_list{
      img{
        width: 67px;
        height: 48px;
        margin-right: 6px;
        padding-bottom: 6px;
        display: block;
        float: left;
        &:last-child{
          margin-right: 0;
        }
      }
    }
  }
  .tip_box{
    .tip_text{
      float: left;
      font-size: 0;
      .text_1{
        color: #ffffff;
        font-size: 14px;
        background: #4965fa;
        padding: 4px 10px;
        border-radius: 5px;
      }
      .text_2{
        color: #ffffff;
        font-size: 13px;
        margin: 12px 0 5px;
      }
      .text_3{
        color: #7081fa;
        font-size: 13px;
      }
    }
    .code{
      width: 70px;
      height: 70px;
      background: #fff;
      position: relative;
      float: right;
      margin-top: 9px;
      img{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
        width:67px;
        height:67px;
      }
    }
  }
}

.height{
  height:55px ;
}

.dialog_text{
  text-align: center;
  margin: 20px 0 22px;
  span{
    color: #ff5d24;
  }
}

.substring_3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; //需要控制的文本行数
  overflow: hidden;
}

.line{
  height:7px ;
  background: #f8f8f8;
}

.side_nav_1{
  width: 45px;
  position: fixed;
  right: 7px;
  top: 55%;
  z-index: 999;
}

.side_nav_2{
  width: 45px;
  position: fixed;
  right: 7px;
  top: 65%;
  z-index: 999;
}

.side_nav_item{
  width: 45px;
  height:45px;
  border-radius: 50%;
  color:#ffffff ;
  font-size: 14px;
  line-height: 45px;
  text-align: center;
  display: block;
  margin-bottom: 10px;
  &:last-child{
    margin-bottom: 0;
  }
}

.side_nav_item_1{
  background: rgba(255,118,51,85%);
  box-shadow: 0px 0px 5px #ff7633;
}

.side_nav_item_2{
  background: rgba(51,151,255,85%);
  box-shadow: 0px 0px 5px #3397ff;
}

.side_nav_item_3{
  background: url(../../assets/images/cityinfo/back.png) no-repeat center / 16px 20px #7c7c7c;
}

.alw_layer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9999;
  background: url(../../assets/images/campus/wzp_layer.png) no-repeat center center /320px 122px rgba(0,0,0,.8);
}
</style>
